<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>Fenius Web UI</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/resources/tundraGrid.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true" type="text/javascript"></script>

    <script type="text/javascript">
        dojo.require("dijit.dijit"); 
        dojo.require("dijit.form.Form");
        dojo.require("dijit.form.FilteringSelect");
        dojo.require("dijit.form.DateTextBox");
        dojo.require("dijit.form.TimeTextBox");
        dojo.require("dijit.form.NumberTextBox");
        dojo.require("dijit.form.Slider");
        dojo.require("dijit.form.TextBox");
        dojo.require("dijit.form.Button");
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.Dialog");
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dojox.data.QueryReadStore");
        dojo.require("dojox.grid.DataGrid");
    </script>
    <script type="text/javascript" src="js/jit.js"></script>
    <script type="text/javascript" src="js/excanvas.js"></script>
    <script type="text/javascript" src="js/graph.js"></script>
    <script type="text/javascript" src="js/create.js"></script>
    <link rel="shortcut icon" href="img/favicon.ico" />
</head>
<body class="tundra">


<span dojoType="dojox.data.QueryReadStore" jsId="edgeStore" url="edges" requestMethod="get"></span>
<span dojoType="dojox.data.QueryReadStore" jsId="netStore" url="networks" requestMethod="get"></span>
<span dojoType="dojox.data.QueryReadStore" jsId="grpStore" url="groups" requestMethod="get"></span>
<span dojoType="dojox.data.QueryReadStore" jsId="linkStore" url="links" requestMethod="get"></span>

<div dojoType="dijit.layout.ContentPane" style="width: 800px">
    <h3 style="text-align: center">Fenius SuperAgent</h3>
</div>

<div dojoType="dijit.layout.TabContainer" id="tabs" style="width: 800px; height: 1100px;">


<div dojoType="dijit.layout.ContentPane" title="Reserve" style="width: 800px; height: 1100px;">

<div dojoType="dijit.layout.BorderContainer" gutters="true" style="width: 800px; height: 1100px;">
    <div dojoType="dijit.layout.ContentPane" splitter="true" region="left" style="width: 350px">
        <div dojoType="dijit.layout.BorderContainer" gutters="true">
            <div dojoType="dijit.layout.ContentPane" region="top" splitter="true" style="height: 145px">
                <h3>1. First endpoint</h3>
                <div style="float:right; clear: left" >
                    <label for="srcNetSelect">Network:</label> 
                    <select dojoType="dijit.form.FilteringSelect" id="srcNetSelect" store="netStore" autoComplete="true">
                        <script type="dojo/method" event="onChange" args="network">
                            dijit.byId('srcSelect').value = "";
                            dijit.byId('srcGrpSelect').value = "";
                            dijit.byId('srcSelect').query.network = network || "*";
                            dijit.byId('srcGrpSelect').query.network = network || "*";
                        </script>
                    </select>
                </div>
                <div style="float:right; clear: left" >
                    <label for="srcGrpSelect">Group:</label> 
                    <select dojoType="dijit.form.FilteringSelect" id="srcGrpSelect" store="grpStore" autoComplete="true"></select>
                </div>
                <div style="float:right; clear: left" >
                    <label for="srcSelect">Endpoint:</label> 
                    <select dojoType="dijit.form.FilteringSelect" id="srcSelect" store="edgeStore" autoComplete="true"></select>
                </div>
                <div style="float:right; clear: left;">
                    <label for="srcVlan">VLAN:</label>
                    <input id="srcVlan" />
                </div>
                <div style="clear: both" ></div>
                <div dojoType="dijit.form.DropDownButton" style="clear: left; float: right">
                    <span>Help</span>
                    <div dojoType="dijit.TooltipDialog" execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));" style="width: 400px">
                        <p>First choose a network - that will populate the group selection. You can use the mouse or use the keyboard with autocomplete. 
                        Similarly continue to choose a group, and finally pick an endpoint and type in the desired VLAN. 
                        All the fields must be filled in to submit successfully.</p>
                    </div>
                </div>
            </div>
            
            <div dojoType="dijit.layout.ContentPane" region="center" splitter="true">
                <h3>2. Last endpoint</h3>
                <div style="float:right; clear: left;">
                    <label for="dstNetSelect">Network:</label> 
                    <select dojoType="dijit.form.FilteringSelect" id="dstNetSelect" store="netStore" autoComplete="true"></select>
                </div>
                <div style="float:right; clear: left" >
                    <label for="dstGrpSelect">Group:</label> 
                    <select dojoType="dijit.form.FilteringSelect" id="dstGrpSelect" store="grpStore" autoComplete="true"></select>
                </div>
                <div style= "float:right; clear: left;">
                    <label for="dstSelect">Endpoint:</label> 
                    <select dojoType="dijit.form.FilteringSelect" id="dstSelect" store="edgeStore" autoComplete="true"></select>
                </div>
                
                <!-- ATTENTION: NO VLAN TRANSLATION SO ONLY ONE VLAN CONTROL DISPLAYED AND USED -->
                <div style="float:right; clear: left; display: none">
                    <label for="dstVlan">VLAN:</label> 
                    <input id="dstVlan" />
                </div>
                
                <div style="clear: both" ></div>
                <div dojoType="dijit.form.DropDownButton" style="clear: left; float: right">
                    <span>Help</span>
                    <div dojoType="dijit.TooltipDialog" execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));" style="width: 400px">
                        <p>First choose a network  - that will populate the group selection. You can use the mouse or use the keyboard with autocomplete. 
                        Similarly continue to choose a group, and finally pick an endpoint and type in the desired VLAN. 
                        All the fields must be filled in to submit successfully.</p>
                    </div>
                </div>
            </div>
            <div dojoType="dijit.layout.ContentPane" splitter="true" region="bottom" style="height: 130px;">
                <h3>3. Bandwidth</h3>
                <div id="slider"></div>
                <div style="float:right">
                    <label for="sliderValue">Bandwidth (Mbps):</label> 
                     <input type="text" id="sliderValue" dojoType="dijit.form.TextBox" value="1000" style="width: 60px" size="5" />
                </div>
                <div style="clear: both" ></div>
                <div dojoType="dijit.form.DropDownButton" style="float: right">
                    <span>Help</span>
                    <div dojoType="dijit.TooltipDialog" execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));" style="width: 400px">
                        <p>Use the slider or type in the desired bandwidth.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
        <div dojoType="dijit.layout.BorderContainer" gutters="true">
            <div dojoType="dijit.layout.ContentPane" region="top"  splitter="true" style="height: 23%">
                <h3>4. Scheduling</h3>
                <div dojoType="dijit.layout.ContentPane" id="timezone"></div>
                <div style= "float:right; clear: left;">
                    <label for="upDate">Setup:</label>
                    <input id="upDate" /><input id="upTime"  />
                </div>
                <div style= "float:right; clear: left;">
                    <label for="dnDate">Teardown:</label>
                    <input id="dnDate" /><input id="dnTime" />
                </div>
                <div style="clear: both" ></div>
                <div dojoType="dijit.form.DropDownButton" style="float: right">
                    <span>Help</span>
                    <div dojoType="dijit.TooltipDialog" execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));" style="width: 400px">
                        <p>Use the calendar and time widgets or type in the desired setup and teardown dates and time. 
                        Note that teardown must come later than setup, and setup must be in the future. 
                        Times are in your local timezone, which  is automatically detected from your browser settings.</p>
                    </div>
                </div>
            </div>

            <div dojoType="dijit.layout.ContentPane" region="center" splitter="true">
                <h3>5. Interdomain</h3>
                <p align="center"><button dojoType="dijit.form.Button" onclick="populatePath()">View interdomain path</button></p>
                <table id="pathGrid" dojoType="dojox.grid.DataGrid" query="{name: '*'}" store="pathStore" style="height: 55%">
                    <thead>
                        <tr>
                            <th field="network" width="50%">Network</th>
                            <th field="name" width="50%">Hop</th>
                        </tr>
                    </thead>
                </table>
                <div style="clear: both" ></div>
                <div dojoType="dijit.form.DropDownButton" style="float: right">
                    <span>Help</span>
                    <div dojoType="dijit.TooltipDialog" execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));" style="width: 400px">
                        <p>This will display the interdomain path the server has calculated for a reservation 
                        between the selected first and last endpoints. </p>
                    </div>
                </div>
            </div>
            <div dojoType="dijit.layout.ContentPane" region="bottom"  splitter="true" style="height: 20%;">
                <h3>6. Submit!</h3>
                <p align="center"><button dojoType="dijit.form.Button" onclick="submitReserve()">Request reservation</button></p>
            </div>
        </div>
    </div>
    <div dojoType="dijit.layout.ContentPane" splitter="true" region="bottom" style="height: 550px">
        <div dojoType="dijit.layout.BorderContainer" gutters="true">
            <div dojoType="dijit.layout.ContentPane" region="center"  splitter="true">
                <h3>Interdomain topology</h3>
                <div id="infovis" style="width: 460px; height: 460px; background-color:#1a1a1a; float: left; margin-left: 20px;"></div>    
                <div id="inner-details" style="float:left; padding: 5px"></div>
                <div id="log" style="display: none"></div>
                <div dojoType="dijit.form.DropDownButton" style="float: right">
                    <span>Help</span>
                    <div dojoType="dijit.TooltipDialog" execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));" style="width: 400px">
                        <p>This is an informational graph that displays the interdomain topology. The node colors are decorative. 
                        A simple algorithm will generate the initial graph, left-click and drag nodes with the mouse to untangle it as needed. 
                        Use the mouse wheel to zoom in and out. </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<div dojoType="dijit.layout.ContentPane" id="queryTab" title="Query" style="width: 800px; height: 1100px;">
    <p>query here</p>
    <div id="statusResult" ><p> </p></div>
</div>

<div dojoType="dijit.layout.ContentPane" id="listTab" title="List" style="width: 800px; height: 1100px;">
    <p>list here</p>
</div>



</div>

</body>
</html>